<template>
  <div>
    <van-pull-refresh v-model="page_config.refreshing"
                      @refresh="$emit('onRefresh')">
      <van-list v-model="page_config.loading"
                :finished="page_config.finished"
                :finished-text="isSearch?'未搜索到相关信息':'--我是有底线的--'"
                @load="$emit('onLoad')">
        <div class="like-card display-row-center"
             :style="{ 'pointer-events': button_text ? 'none' : 'auto' }"
             v-for="(item, index) in card_list_transcript"
             :key="index"
             @click="goScenicSpotDetail(item)">
          <img :src="item.img || item.imgs_json[0]"
               class="card-img" />
          <div class="card-content">
            <div class="font-weight-500 font-size-16">{{ item.name }}</div>
            <div v-if="item.distance"
                 class="font-size-14 font-color-8C9198">{{ item.distance }}</div>
            <div class="card-content-purchase display">
              <momenyTitle :number="item.sku_min_price" />
              <div class="card-content-purchase__button"
                   v-if="button_text"
                   :style="{ 'pointer-events': 'auto' }"
                   @click="goTicketDetail($event, item)">
                {{ button_text }}
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import momenyTitle from '@/components/momenyTitle';

export default {
	name: 'CardList',
	components: {
		momenyTitle,
	},
	props: {
		module_name: {
			//模块
			type: [String, Number],
			default: '',
		},
		button_text: {
			//按钮文本
			type: String,
			default: '',
		},
		card_list: {
			//列表数据
			type: Array,
			default: [],
		},
		page_config: {
			//刷新配置项
			type: Object,
			default: () => {},
		},

	},
	data() {
		return {
			card_list_transcript: [], //card_list副本
            isSearch:false,
		};
	},
	watch: {
		card_list(newName, oldName) {
			this.card_list_transcript = newName;
            if(this.card_list_transcript.length > 0) {
                this.isSearch = false
            }else{
                this.isSearch = true
            }
		},
	},
	mounted() {
		this.card_list_transcript = this.card_list;
	},
	methods: {
		goScenicSpotDetail(info) {
			const ROUTE = this.$route.path;
			switch (ROUTE) {
				case '/detailsPage':
				case '/searchPage':
					this.$router.push({ path: '/masterPage', query: { id: info.id, shop_id: info.shop_id, type: info.type } });
					break;
				case '/masterPage':
					this.$router.push({ path: '/check', query: { tour_product_id: info.id } });
					break;
			}
		},
		goTicketDetail(e, info) {
			e.stopPropagation();
			const ROUTE = this.$route.path;
			switch (ROUTE) {
				case '/detailsPage':
				case '/searchPage':
					this.$router.push({ path: '/masterPage', query: { id: info.id, shop_id: info.shop_id, type: info.type } });
					break;
				case '/masterPage':
					this.$router.push({ path: '/check', query: { tour_product_id: info.id } });
					break;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.like-card {
	display: flex;
	border-radius: 0.144928rem;
	margin-bottom: 0.289855rem;
	width: 100%;
	height: 2.898551rem;
	box-shadow: 0 0.096618rem 0.193237rem 0 rgba(0, 0, 0, 0.08);

	.card-img {
		border-radius: 0.193237rem;
		width: 3.792271rem;
		height: 2.318841rem;
		padding: 0 0.289855rem 0 0.289855rem;
		object-fit: cover;
	}

	.card-content {
		width: 4.710145rem;
		height: 2.318841rem;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.card-content-purchase {
			.card-content-purchase__button {
				width: 1.980676rem;
				align-items: center;
				border-radius: 0.386473rem;
				font-size: 0.338164rem;
				height: 0.676329rem;
				border: #eb5f3e 0.024155rem solid;
				background-color: #eb5f3e;
				color: #ffffff;
				display: flex;
				justify-content: center;
			}
		}
	}
}
</style>
